<template>
    <div class="g-schedule">
        <h4 class="m-header">{{$route.query.from}}</h4>
        <ul class="g-date">
            <li :class="date.length<=1?'lw':''" v-for="(item,index) in date" :key="index" @click="tabDate(index,item)">
                <div :class="['m-date',cur==index?'active':'']">
                    <span>{{item.d}}</span>
                    <span>{{item.w}}</span>
                </div>
                <div class="m-state">出诊</div>
            </li>
        </ul>
        <div class="g-scl">
            <div class="g-doctors" v-for="(item,index) in doctors" :key="index">
                <div class="m-doctor">
                    <div class="doc-photo">
                    </div>
                    <div class="doc-info">
                        <div class="hospital-title"><span class="main">{{item.doctorName}}</span><span class="sub">{{item.doctorTitle}}</span></div>
                        <div class="hospital-dep">科室：{{item.departmentName}}</div>
                    </div>
                </div>
               <ul class="schedule" >
                    <li v-for="(i,n) in item.srvList" :key="n" @click="register(index,n,i,item)">
                       <span class="u-date">{{item.serviceDate+i.sessionName}}</span>
                       <div class="g-info">
                            <div class="u-num">
                                <span class="l">{{i.availableLeftNum}}</span>
                                <span class="r">{{i.availableTotalNum}}</span>
                            </div>
                            <div class="u-fee">
                                ￥{{i.fee}}
                            </div>
                       </div>
                    </li>
               </ul> 
            </div>
            <div class="nothing" v-if="doctors && doctors.length==0">
                <span class="icn"></span>
                <span class="txt">无值班人员</span>
            </div>
        </div>
        <div :class="['appointment',showTime?'active':'']">
            <div class="doc-time" v-if="doctors.length">
                <p>{{doctors[index]['doctorName']}}{{doctors[index]['doctorTitle']}}</p>
                <p>{{doctors[index]['serviceDate']}}{{doctors[index]['srvList'][n]['sessionName']}}</p>
            </div>
           <div class="time">
                <button type="button" :class="['btn',selected==index?'btn-primary':'btn-default','btn-sm']" v-for="(item,index) in time" :key="index" @click="selectDate(index,item)">{{item.startTime+'-'+item.endTime}}</button>
                <i></i><i></i><i></i><i></i><i></i>
           </div>
           <ul class="m-btns">
                <li class="no" @click="cancel">取消</li>
                <li class="yes" @click="sure">确认</li>
           </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
           date:[],
           cur:0,
           doctors:[],
           index:0,
           n:0,
           time:[],
           showTime:false,
           selected: 0,
           deptcode: '',
           curTime: '',
           schcode: '',
           doctorName: '',
           departmentName: '',
           serviceDate: '', //挂号日期
           startTime: '', //挂号时间
           endTime: '', //号结束时间
           fee: '' // 挂号费
        }
    },
    created(){
       this.setDate();
       this.getDutyDoctors()
    },
    methods:{
        setDate(){
            const week=['周日','周一','周二','周三','周四','周五','周六']
            let date=new Date();
            for(let i=0;i<1;i++){
                const obj={}
                obj.d=date.getDate()
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                obj.time = currentdate
                obj.w=week[date.getDay()]
                date.setDate(date.getDate()+1);
                this.date.push(obj)
            }
        },
        tabDate(index,item){
            this.cur=index;
            this.curTime = item.time
            this.getDutyDoctors()
            console.log('选中的时间:',item)
        },
        getDutyDoctors(){
            let deptcode = this.$route.query.deptcode
            let startDate = this.curTime
            let endDate = this.curTime
            if(startDate == '') {
                let date = new Date()
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                console.log('strDate:',strDate)
                startDate = year + seperator1 + month + seperator1 + strDate;
                endDate = startDate;
            }
            this.$store.commit('setLoading',true)
            this.$api.getDutyDoctors(startDate,endDate,deptcode).then(res=>{
                this.$store.commit('setLoading',false);
                this.doctors=res.data
            })
        },
        register(index,n,i,item){
            this.index=index;
            this.n=n;
            this.schcode = i.scheduleCode
            this.doccode = item.doctorCode
            this.doctorName = item.doctorName
            this.departmentName = item.departmentName
            this.fee = i.fee
            console.log("挂号:",item)
            console.log("具体号:",i)
            this.getTime()
        },
        getTime(){
            this.$store.commit('setLoading',true)
            let schcode = this.schcode
            let deptcode = this.$route.query.deptcode
            let doccode = this.doccode
            this.$api.getTime(schcode,deptcode,doccode).then(res=>{
                this.showTime=true
                this.selected=0
                this.$store.commit('setLoading',false);
                this.time=res.data.datalist
                this.serviceDate = this.time[0].serviceDate
                this.startTime = this.time[0].startTime
                this.endTime = this.time[0].endTime
                console.log(this.time)
            })
        },
        cancel(){
            this.selectVal=''
            this.showTime=false;
        },
        sure(){
            if(this.selected>=0){
                console.log(this.time[this.selected]['startTime']+'-'+this.time[this.selected]['endTime'])
            }
            this.showTime=false;
            let scheduleId = encodeURIComponent(this.schcode)
            let doctorName = this.doctorName
            let departmentName = this.departmentName
            let admTime = this.serviceDate + ' ' + this.startTime
            let timeRange = this.startTime + '-' + this.endTime
            let url = 'http://wx.lfhospital.net/yygh/f/his/order/confirmregister?scheduleId=' 
            + scheduleId + '&doctorName=' + doctorName + '&departName=' + departmentName 
            + '&admTime=' + admTime + '&fee=' + this.fee + '&timeRange=' + timeRange
            console.log("url:",url)
            window.location.href = url
        },
        selectDate(index, item){
            console.log("医生挂号时间:",item)
            this.serviceDate = item.serviceDate
            this.startTime = item.startTime
            this.endTime = item.endTime
            this.selected=index
        }
    }
}
</script>
<style lang="less">
    .appointment{
        position: fixed;
        background-color: #ffffff;
        bottom: 0;
        width: 100%;
        bottom: -100%;
        transition: all ease-in-out .2s;
    }
    .appointment.active{
        bottom: 0;
    }
    .time{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 10px 0 10px 0;
        button{
            width: 25%;
            margin: 0 8px 10px 8px;
        }
        > i {
            width: 25%;
            margin: 0 8px 10px 8px;
        }
    }
    .m-btns{
        display: flex;
        margin: 0;
        border-top: 1px solid #d9d9d9;
        li{
            flex: 1;
            text-align:center;
            height: 40px;
            line-height:40px;
        }
        .no{
            color: #9a9a9a;
            border-right: 1px solid #d9d9d9;
        }
        .yes{
            color: #4092f5;
        }
    }
    .doc-time{
        padding:10px 10px;
        background-color: #3375d6;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        margin-bottom: 10px;
        p:first-child{
            margin-bottom:5px;
        }
        p{
            margin: 0;
        }
    }
.g-schedule{
    height: 100%;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    h4{
        margin: 0;
    }
}
.g-scl{
        flex:1;
        overflow: auto;
    }
.m-header{
    padding:15px 10px;
    background-color: #ffffff;
}
.g-date{
    display: flex;
    li{
        display: flex;
        flex-direction: column;
        text-align: center;
        flex: 1;
    }
    li.lw{
        width: 14.2%;
        flex:none;
    }
}
.g-date{
    padding: 10px 0 20px 0;
    margin-top: 10px;
    background-color: #ffffff;
    .m-date{
        display: flex;
        flex-direction: column;
        margin:0 2px 10px 2px;
        position: relative;
    }
    .m-date::after{
        position: absolute;
        content: '';
        right: -1px;
        width: 1px;
        background-color: #f3f3f3;
        top:5px;
        bottom: 5px;
    }
    .m-date.active{
        color: #ffffff;
        background-color: #4BA6F2;
        border-radius: 4px;
    }
}
.m-state{
    color: #0077dd;
}
.g-doctors{
    background:#ffffff;
    padding:8px 10px 0;
    margin-bottom: 5px;
}
.m-doctor{
    display:flex;
    justify-content:left;
    padding-bottom: 10px;
}
.doc-photo{
    margin-right: 10px;
    width: 80px;
    height: 80px;
    border:1px solid #bde0ff;
    box-sizing:border-box;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.doc-photo::after{
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    bottom: -10px;
    background: url() left top no-repeat;
    background-size: contain;
}
.doc-info{
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hospital-title{
    display: flex;
    align-items: flex-end;
    .main{
        font-size: 14px;
        margin-right:10px;
    }
    .sub{
        font-size: 12px;
        color: #b2b2b2;
    }
}
.hospital-dep{
    font-size: 12px;
    color: #b2b2b2;
}
.schedule{
    margin: 0;
    >li{
        border-top: 1px solid #d9d9d9;
        display: flex;
        justify-content:space-between;
        color:#b2b2b2;
        font-size: 14px;
        padding:10px 0;
        align-items:center;
        padding-right: 20px;
        background:url('') right center no-repeat;
        background-size:16px 16px;
        .g-info{
            display: flex;
            align-items: center;
            
        }
        .u-fee{
            color: #fe6700;
            margin-left: 8px;
            font-weight: 700;
        }
        .u-num{
            display: flex;
            height: 26px;
            width: 70px;
            font-size: 10px;
            box-sizing: border-box;
            border:1px solid #4092f5;
            >span{
                flex: 1;
                line-height:24px;
                text-align:center;
            }
            .l{
                color: #4092f5;
            }
            .r{
                color: #ffffff;
                background-color: #4092f5;
                position: relative;
            }
            .r::before{
                content:'';
                position: absolute;
                color: #ffffff;
                position: absolute;
                border-left:8px solid transparent;
                border-bottom:24px solid #4092f5;
                left: -8px;
                top: 0;
            }
        }
    }
}
.nothing{
    display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .icn{
        width: 80px;
        height: 80px;
        border-radius:50%;
        background:url('') #e0f2ff center center no-repeat;
        background-size:60px 60px;
    }
    .txt{
        margin-top: 6px;
        font-size: 12px;
    }
}
</style>